import React from 'react';
import { Form, Input, Button, Space, Select, Tooltip, Row, Col } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

const Search = (props: any) => {
  const [form] = Form.useForm();
  const { callbackValue, loading } = props;
  const onReset = () => {
    form.resetFields();
  };
  const onFinish = (values: any) => {
    callbackValue(values);
  };
  return (
    <Form
      style={{
        display: 'flex',
        flex: 1,
        flexWrap: 'wrap',
        alignItems: 'center',
      }}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
    >
      <Form.Item name="productName" style={{ marginBottom: 0, width: 150 }}>
        <Input placeholder={'请输入品名'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="color" style={{ marginBottom: 0, width: 150 }}>
        <Input placeholder={'请输入颜色'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="attribute" style={{ marginBottom: 0, width: 150 }}>
        <Input placeholder={'请输入属性'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="grade" style={{ marginBottom: 0, width: 150 }}>
        <Input placeholder={'请输入等级'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item name="spec" style={{ marginBottom: 0, width: 150 }}>
        <Input placeholder={'请输入规格'} />
      </Form.Item>
      <span style={{ padding: 4 }} />
      <Form.Item style={{ marginBottom: 0 }}>
        <>
          <Tooltip title="搜索">
            <Button
              disabled={loading}
              icon={<SearchOutlined />}
              type="primary"
              htmlType="submit"
            />
          </Tooltip>
        </>
      </Form.Item>
    </Form>
  );
};

export default Search;
